<template>
  <div class="step-box" v-if="dataList && dataList.length">
    <div v-for="(item, index) in dataList" :key="index">
      <div class="step"
           :class="[item.progress ? '' : 'unprogress']"
           v-if="item.progress||item.isProgress">
        <div class="step-status"
             :class="[item.isProgress ? 'progress' : 'finish']"></div>
        <div class="step-info"
             :style="cssVars">
          <div class="step-title"
               :class="[item.isProgress ? 'inprogress' : '',currentProgress===item.progressCode ? 'active' : '']"
               @click="handleClickStep(item.progressCode, 'element')">
            {{ item.name }}
          </div>
          <div class="step-progress">
            <div class="progress-tiao">
              <div class="progress" :style="{width:(item.progress/100)*52+'px'}"></div>
            </div>
            <div class="progress-number">{{ item.progress }}%</div>
          </div>
          <div class="step-time">
            {{ item.time }}
          </div>
        </div>
      </div>
      <div v-else class="step unprogress">
        <div class="step-info">
          <div class="step-title unprogress"
               :class="[currentProgress===item.progressCode ? 'active' : '']"
               @click="handleClickStep(item.progressCode, 'element')">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* 立项阶段：imd_ztpro_xmlx
尽职调查：imd_ztpro_xmjd
投决阶段：imd_ztpro_xmtj
协议签署：imd_ztpro_xyqs
项目交割：imd_ztpro_projiaoge
投后：       imd_ztpro_th
项目投决：imd_ztpro_xmtj */
export default {
  name: '',
  props: {
    dataList: {
      type: Array,
      default: []
    },
    themeColor: String,
    invoke: Function
  },
  computed: {
    cssVars() {
      return {
        "--themeColor": this.themeColor,
        "--themeColorLighten": this.hex2rgb(this.themeColor, 0.1),
      }
    }
  },
  data() {
    return {
      currentProgress: '', // 当前点击的流程
      previousClick: ''// 上一个点击的流程
    }
  },
  watch: {
    // 监听数据改变时流程变动
    dataList(val) {
      if (val && val.length) {
        val.forEach(item => {
          if (item.isProgress) {
            this.handleClickStep(item.progressCode)
          }
        });
      }
    }
  },
  mounted() {
    // 默认显示当前正在进行的流程
    this.dataList.forEach(item => {
      if (item.isProgress) {
        this.handleClickStep(item.progressCode)
      }
    });
  },
  methods: {
    /***
     * //将16进制颜色或者rdb转换成rgba
     * @param color
     * @param opacity
     * @returns {string}
     */
    hex2rgb(color, opacity = 1) {
      if (/^(rgb|RGB)/.test(color)) {
        let arr = color.toString().split(',');
        arr[3] = opacity + ')';
        return arr.join(',');
      }
      color = color.substring(1);
      color = color.toLowerCase();
      let b = [];
      for (let i = 0; i < 3; i++) {
        b[0] = color.substr(i * 2, 2);
        b[3] = "0123456789abcdef";
        b[1] = b[0].substr(0, 1);
        b[2] = b[0].substr(1, 1);
        b[20 + i] = b[3].indexOf(b[1]) * 16 + b[3].indexOf(b[2]);
      }
      return "rgb(" + b[20] + "," + b[21] + "," + b[22] + "," + opacity + ")";
    },
    handleClickStep: function (progressCode, flag) {
      this.currentProgress = progressCode
      // 如果点击当前显示的流程元素就无须更新
      if (flag === 'element' && (this.previousClick == this.currentProgress)) {
        return
      }
      this.invoke('click', progressCode)
      this.previousClick = progressCode
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.step-box {
  width: 168px;
  padding: 30px 20px;
}

.step {
  background: url(../assets/icon-border.svg);
  background-repeat: repeat-y;
  display: flex;
  position: relative;
  padding-bottom: 20px;
}

.step.unprogress {
  background: none;
}

.step-status {
  width: 20px;
  height: 20px;
  position: absolute;
  left: -9px;
}

.step-status.finish {
  background: #FAFAFA url(../assets/icon-finish.svg) no-repeat;
}

.step-status.progress {
  background: #FAFAFA url(../assets/icon-progress.svg) no-repeat;
}

.step-info {
  margin-left: 20px;
  margin-top: -6px;
}

.step-title {
  width: 88px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 4px;
  /*background: #DCFAE4;*/
  background: var(--themeColorLighten);
  font-size: 14px;
  color: #212121;
  margin-bottom: 10px;
  cursor: pointer;
}

/*.step-title.active {*/
/*  !*color: #212121;*!*/
/*  color: #fff;*/
/*  background: var(--themeColor);*/
/*  font-weight: 600;*/
/*}*/
.step-title.inprogress {
  /*background: #E0EFFF;*/
  color: #fff;
  background: var(--themeColor);
}

.step-title.unprogress {
  background: rgba(102, 102, 102, 0.1);
  color: #666;
}

.step-progress {
  display: flex;
  margin-bottom: 10px;
}

.progress-tiao {
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: #E5E5E5;
  position: relative;
}

.progress-tiao .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: var(--themeColor);
}

.step-time {
  font-size: 12px;
  color: #999;
}

.progress-number {
  font-size: 12px;
  line-height: 4px;
  color: #666;
  margin-left: 5px;
}
</style>
